<template>
  <div class="app-container">
    <div style="display: flex; justify-content:flex-end">
      <!-- <el-button v-if="processed === false && approvalStatus == '归档'" size="mini" type="info" icon="el-icon-printer"  @click="printClick()">打印</el-button> -->
      <el-button size="mini" icon="el-icon-back" @click="returnGo">返 回</el-button>
    </div>
      
    <el-tabs v-loading="formLoading" tab-position="top" @tab-click="handleClick" :value="'form'">
      <el-tab-pane  label="表单信息" name="form">
        <div v-if="formOpen">
          <el-card
            class="box-card"
            shadow="never"
            v-for="(formInfo, index) in processList"
            :key="index"
          >
            <div slot="header" class="clearfix">
              <div class="headerTitle">
                <div>
                  <span>{{ formInfo.title }}</span>
                </div>
                <!-- <div v-if="editFlag === 0">
                  <el-button v-if="formOpen" size="mini" type="info" v-hasPermi="['workflow:process:print']" @click="printClick(formInfo,index)">打印</el-button>
                </div> -->
              </div>
              
            </div>
            <!--流程处理表单模块-->
            <el-col :span="20" :offset="2">
              <!-- <parser :form-conf="formInfo" /> -->
              <!-- <div id="printBox"> -->
                <v-form-render v-if="formOpen" :form-json="formInfo.fields" :form-data="formInfo.field" ref="vFormRefSubmit"></v-form-render>
              <!-- </div> -->
            </el-col>
          </el-card>
        </div>
        <div v-if="processed === true">
          <el-card class="box-card" shadow="hover" v-if="taskFormOpen">
            <div slot="header" class="clearfix">
              <span>填写表单</span>
            </div>
            <el-col :span="20" :offset="2">
              <!-- <parser :form-conf="taskFormData" ref="taskFormParser" /> -->
              <v-form-render v-if="formOpen" :form-json="taskFormData.fields" :form-data="taskFormData.field" ref="vFormRefs"></v-form-render>
              <!-- <el-button type="primary">打印</el-button> -->
            </el-col>
          </el-card>
          <div v-if="editFlag === 0">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>办理流程</span>
              </div>
              <el-row>
                <el-col :span="20" :offset="2">
                  <el-form ref="taskForm" :model="taskForm" :rules="rules" label-width="120px">
                      <el-form-item label="办理意见" prop="comment">
                      <!-- <el-input
                        type="textarea"
                        :rows="5"
                        v-model="taskForm.comment"
                        placeholder="请输入办理意见"
                      /> -->
                      <el-autocomplete
                      style="width:100%"
                        class="inline-input"
                        type="textarea"
                        :rows="5"
                        v-model="taskForm.comment"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入审批意见"
                        @select="handleSelect"
                      ></el-autocomplete>
                    </el-form-item>
                    <!-- <el-form-item label="抄送人" prop="copyUserIds">
                      <el-tag
                        :key="index"
                        v-for="(item, index) in copyUser"
                        closable
                        :disable-transitions="false"
                        @close="handleClose('copy', item)"
                      >{{ item.nickName }}</el-tag>
                      <el-button
                        class="button-new-tag"
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        circle
                        @click="onSelectCopyUsers"
                      />
                    </el-form-item>
                    <el-form-item label="指定审批人" prop="copyUserIds">
                      <el-tag
                        :key="index"
                        v-for="(item, index) in nextUser"
                        closable
                        :disable-transitions="false"
                        @close="handleClose('next', item)"
                      >{{ item.nickName }}</el-tag>
                      <el-button
                        class="button-new-tag"
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        circle
                        @click="onSelectNextUsers"
                      />
                    </el-form-item> -->
                  </el-form>
                </el-col>
              </el-row>
              <!-- 按钮功能 -->
              <div  v-if="buttonConfig != '1' && otherConfig == null" >
                <el-row :gutter="10" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete('0')">{{btnTitle}}</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button icon="el-icon-refresh-left" type="warning" @click="handleComplete('1')">退回</el-button>
                </el-col>
              </el-row>
              </div>
              <div  v-if="buttonConfig == '1' && otherConfig == null" >
                <el-row :gutter="10" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete('2')">同意退回</el-button>
                </el-col>
              </el-row>
              </div>
              <div v-if="otherConfig !== null && !approvalStatus.includes('外部公司')">
              <!-- 按钮功能 -->
              <el-row :gutter="10" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete('0',otherConfig.specialBtn)">{{otherConfig.specialBtn}}</el-button>
                  <!-- <el-button v-if="specialBtn == 4 " icon="el-icon-circle-check" type="success" @click="handleComplete('0')">处理完成</el-button> -->
                  <!-- <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete">处理</el-button> -->
                </el-col>
              </el-row>
            </div>
              <!-- <div v-if="approvalStatus == '待分中心人员处理'"> -->
              <!-- 按钮功能 -->
              <!-- <el-row :gutter="10" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete('0')">处理完成</el-button>
                </el-col>
              </el-row> -->
            <!-- </div> -->
            <div v-if="otherConfig !== null && approvalStatus.includes('外部公司')">
              <!-- 按钮功能 -->
              <el-row :gutter="10" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete('0',otherConfig.specialBtn)">{{otherConfig.specialBtn}}</el-button>
                  <el-button v-if="projectName != '跨境电子商务进口统一版系统上海关区' && projectName != '跨境电子商务出口统一版系统上海关区' && projectName != '出口新造集装箱及堆场管理系统' && projectName != '加工贸易联网监管E帐册辅助管理模块二期' && projectName != '应用项目注销系统' && projectName !='企业名称变更' && projectName != '企业联系信息变更' " type="warning"  icon="el-icon-tickets" @click="workOrder">{{ OrderButton }}</el-button>
                  <!-- <el-button v-if="projectName != 'VPN接入申请' && projectName != '应用项目注销系统' && projectName !='企业名称变更' && projectName != '企业联系信息变更' "  icon="el-icon-paperclip" type="success" @click="handleVPN">关联VPN</el-button> -->
                  <el-button v-if="projectName == 'VPN接入申请'"  icon="el-icon-circle-check" type="info" @click="PrintContract">打印合同书</el-button>
                </el-col>
              </el-row>
            </div>
            </el-card>  
          </div>
          <div v-if="editFlag === 1">
            <!-- <el-card class="box-card" shadow="hover"> -->
              <!-- 按钮功能 -->
              <el-row :gutter="10" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button type="info" icon="el-icon-circle-plus-outline" @click="handleupdateForm">暂存</el-button>
                  <el-button  icon="el-icon-circle-check" type="primary" @click="handleCompleteSubmit">提交</el-button>
                </el-col>
              </el-row>
            <!-- </el-card> -->
          </div>
        
        </div>
        <div v-if="processed === false && (approvalStatus == '归档' || otherConfig !== null)">
          <el-row :gutter="20" type="flex" justify="center">
                <el-col :span="1.5">
                  <el-button v-if="projectName != '跨境电子商务进口统一版系统上海关区' && projectName != '跨境电子商务出口统一版系统上海关区' && projectName != '出口新造集装箱及堆场管理系统' && projectName != '加工贸易联网监管E帐册辅助管理模块二期' && projectName != '应用项目注销系统' && projectName !='企业名称变更' && projectName != '企业联系信息变更' " type="warning"  icon="el-icon-tickets" @click="workOrder">{{ OrderButton }}</el-button>
                  <!-- <el-button v-if="projectName != 'VPN接入申请' && projectName != '应用项目注销系统' && projectName !='企业名称变更' && projectName != '企业联系信息变更' "  icon="el-icon-paperclip" type="primary" @click="handleVPN">关联VPN</el-button> -->
                  <el-button v-if="projectName == 'VPN接入申请'"  icon="el-icon-printer" type="info" @click="PrintContract">打印合同书</el-button>
                </el-col>
              </el-row>
        </div>
        <!-- <div>
          <el-card class="box-card" shadow="never">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="分中心处理信息" name="1">
                <div>DXPID: YW8888888888888888</div>
                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
              </el-collapse-item>
              <el-collapse-item title="企业申请历史记录" name="2">
                <el-table>
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column label="序号" type="index" width="55" align="center" />
                  <el-table-column label="申请编号" align="center" prop="serialCode" :show-overflow-tooltip="true" />
                  <el-table-column label="企业名称" prop="orgName" align="center" width="160">
                  </el-table-column>
                  <el-table-column label="应用项目" align="center" prop="projectName" >
                  </el-table-column>
                  <el-table-column label="申请时间" align="center" sortable prop="applyForTime" width="180" />
                </el-table>

                <pagination
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                />
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </div> -->
      </el-tab-pane>

      <!-- <el-tab-pane label="任务处理" name="approval" v-if="processed === true">
        <el-card class="box-card" shadow="hover" v-if="taskFormOpen">
          <div slot="header" class="clearfix">
            <span>填写表单</span>
          </div>
          <el-col :span="20" :offset="2">
            <parser :form-conf="taskFormData" ref="taskFormParser" />
            <v-form-render v-if="formOpen" :form-json="taskFormData.fields" :form-data="taskFormData.field" ref="vFormRefs"></v-form-render>
          </el-col>
        </el-card>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>审批流程</span>
          </div>
          <el-row>
            <el-col :span="20" :offset="2">
              <el-form ref="taskForm" :model="taskForm" :rules="rules" label-width="120px">
                <el-form-item label="审批意见" prop="comment">
                  <el-input
                    type="textarea"
                    :rows="5"
                    v-model="taskForm.comment"
                    placeholder="请输入 审批意见"
                  />
                </el-form-item>
                <el-form-item label="抄送人" prop="copyUserIds">
                  <el-tag
                    :key="index"
                    v-for="(item, index) in copyUser"
                    closable
                    :disable-transitions="false"
                    @close="handleClose('copy', item)"
                  >{{ item.nickName }}</el-tag>
                  <el-button
                    class="button-new-tag"
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    circle
                    @click="onSelectCopyUsers"
                  />
                </el-form-item>
                <el-form-item label="指定审批人" prop="copyUserIds">
                  <el-tag
                    :key="index"
                    v-for="(item, index) in nextUser"
                    closable
                    :disable-transitions="false"
                    @close="handleClose('next', item)"
                  >{{ item.nickName }}</el-tag>
                  <el-button
                    class="button-new-tag"
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    circle
                    @click="onSelectNextUsers"
                  />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="1.5">
              <el-button  icon="el-icon-circle-check" type="success" @click="handleComplete">{{btnTitle}}</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-chat-line-square" type="primary" @click="handleDelegate">委派</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-thumb" type="success" @click="handleTransfer">转办</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-refresh-left" type="warning" @click="handleReturn">退回</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-circle-close" type="danger" @click="handleReject">拒绝</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane> -->
      
      <el-tab-pane label="流转记录" name="record">
        <el-card class="box-card" shadow="never">
          <el-col :span="20" :offset="2">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(item,index) in historyProcNodeList"
                  :key="index"
                  :icon="setIcon(item.endTime)"
                  :color="setColor(item.endTime)"
                >
                  <p style="font-weight: 700">{{ item.activityName }}</p>
                  <el-card
                    v-if="item.activityType === 'startEvent'"
                    class="box-card"
                    shadow="hover"
                  >{{ item.assigneeName }} 在 {{ item.createTime }} 保存</el-card>
                  <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
                    <el-descriptions :column="5" :labelStyle="{'font-weight': 'bold'}">
                      <el-descriptions-item label="实际办理">{{ item.assigneeName || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="候选办理">{{ item.candidate || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="接收时间">{{ item.createTime || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item>
                      <el-descriptions-item label="耗时">{{ item.duration || '-'}}</el-descriptions-item>
                    </el-descriptions>
                    <div v-if="item.commentList && item.commentList.length > 0">
                      <div v-for="(comment, index) in item.commentList" :key="index">
                        <el-divider content-position="left">
                          <el-tag
                          v-if="comment.type == '1'"
                            :type="approveTypeTag(comment.type)"
                            size="mini"
                          >{{ item.activityName.replace('待','')}}</el-tag>
                          <el-tag
                          v-if="comment.type == '2'"
                            :type="approveTypeTag(comment.type)"
                            size="mini"
                          >{{ commentType(comment.type) }}</el-tag>
                          <el-tag type="info" effect="plain" size="mini">{{ comment.time }}</el-tag>
                        </el-divider>
                        <span>{{ comment.fullMessage }}</span>
                      </div>
                    </div>
                  </el-card>
                  <el-card
                    v-if="item.activityType === 'endEvent'"
                    class="box-card"
                    shadow="hover"
                  >{{ item.createTime }} 结束流程</el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="流程跟踪" name="track">
        <el-card class="box-card" shadow="never">
          <process-viewer
            :key="`designer-${loadIndex}`"
            :style="'height:' + height"
            :xml="xmlData"
            :finishedInfo="finishedInfo"
            :allCommentList="historyProcNodeList"
          />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="企业历史申请记录" name="history">
        <div class="app-container">
        <el-table v-loading="historyLoading" :data="historyList">
          <el-table-column label="序号"  type="index" width="55" align="center" />
          <el-table-column label="申请编号"  align="center" prop="serialCode" width="150">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleProcess(scope.row)">{{scope.row.serialCode}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="应用项目" align="center" prop="projectName" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="企业名称"  prop="orgName" align="center" >
          </el-table-column>
          <el-table-column label="申请日期" align="center" sortable prop="applyForTime" width="220" />
      </el-table>
        <pagination
        v-show="totalHistory>0"
        :total="totalHistory"
        :page.sync="queryParamsHistory.pageNum"
        :limit.sync="queryParamsHistory.pageSize"
        @pagination="getHistoryList"
      />
      </div>
      </el-tab-pane>
    </el-tabs>  
    <!--退回流程-->
    <el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" :close-on-click-modal="false" append-to-body>
      <el-form ref="taskForm" :model="taskForm" label-width="80px">
        <el-form-item label="退回节点" prop="targetKey">
          <el-radio-group v-model="taskForm.targetKey">
            <el-radio-button
              v-for="item in returnTaskList"
              :key="item.id"
              :label="item.id"
            >{{item.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="returnOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitReturn">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="userData.title" :visible.sync="userData.open" width="60%" :close-on-click-modal="false" append-to-body>
      <el-row type="flex" :gutter="20">
        <!--部门数据-->
        <el-col :span="5">
          <el-card shadow="never" style="height: 100%">
            <div slot="header">
              <span>部门列表</span>
            </div>
            <div class="head-container">
              <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
              <el-tree
                :data="deptOptions"
                :props="deptProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-table
            ref="userTable"
            :key="userData.type"
            height="500"
            v-loading="userLoading"
            :data="userList"
            highlight-current-row
            @current-change="changeCurrentUser"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              v-if="userData.type === 'copy' || userData.type === 'next'"
              width="55"
              type="selection"
            />
            <el-table-column v-else width="30">
              <template slot-scope="scope">
                <el-radio :label="scope.row.userId" v-model="currentUserId">{{''}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="用户名" align="center" prop="nickName" />
            <el-table-column label="手机" align="center" prop="phonenumber" />
            <el-table-column label="部门" align="center" prop="dept.deptName" />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userData.open = false">取 消</el-button>
        <el-button type="primary" @click="submitUserData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 打印窗口 -->
    <el-dialog class="printDialog" v-if="dialogVisible" :title="'合同书打印预览'" :visible.sync="dialogVisible" @close="handelClose" width="60%" :close-on-click-modal="false" append-to-body>
      <div id="printBox">
        <img :src="barCode" width="230px"  height="150px"/>
        <div class="Print_title">
          <h2>上海电子口岸VPN网络接入协议书</h2>
          <br/>
        </div>
        <h3><strong>甲 方：</strong></h3>
        <h3><strong>地 址：</strong></h3>
        <h3><strong>联系电话：</strong></h3>
        <h3><strong>传 真：</strong></h3>
        <br />
        <h3><strong>乙 方： 上海亿通国际股份有限公司</strong></h3>
        <h3><strong>地 址： 上海市浦东新区博霞路185号</strong></h3>
        <h3><strong>联系电话： （021）- 20260039</strong></h3>
        <h3><strong>传 真： （021）- 20260020</strong></h3>
        <div class="test_p">
          <p>甲、⼄双⽅经友好协商，就甲⽅使⽤⼄⽅提供的上海电⼦⼝岸VPN⽹络接⼊服务有关事宜达成⼀致。根据《中华⼈⺠共和国合同法》及其他法律法规签订本协议，并由双⽅共同恪守。条款如下：</p>
        </div>
      <h3><strong>⼀、 服务内容</strong></h3>
      <div class="test_p">
          <p>甲⽅通过使⽤⼄⽅提供的上海电⼦⼝岸VPN⽹络接⼊⼯具软件实现与上海电⼦⼝岸VPN⽹络的连接，应⽤上海电⼦⼝岸相关系统。</p>
        </div>
        <h3><strong>⼆、 协议价款</strong></h3>
      <div class="test_p">
          <p>甲⽅享受⼄⽅所提供的VPN⽹络接⼊服务，按照《上海电⼦⼝岸VPN⽹络接⼊管理办法》规定的收费标准，每⽉向⼄⽅⽀付VPN使⽤费。</p>
          <p>（⼀）甲⽅使⽤：</p>
          <p>VPN⽤户名： <ins>{{PrintTitle}}</ins> 申请开通</p>
          <p><ins>&nbsp;&nbsp;{{PrintName}}&nbsp;&nbsp;</ins>权限</p>
          <p>共计VPN账号 <ins>&nbsp;&nbsp;1&nbsp;&nbsp;</ins> 个。</p>
          <p>收费标准 <ins>&nbsp;&nbsp;{{price}}&nbsp;&nbsp;</ins> 元/⽉.客户端。</p>
          <p v-if="price == 100">每⽉使⽤费合计： <ins>&nbsp;&nbsp;100&nbsp;&nbsp;</ins> 元（⼤写：⼈⺠币壹佰 元整）。</p>
          <p v-if="price == 200">每⽉使⽤费合计： <ins>&nbsp;&nbsp;200&nbsp;&nbsp;</ins> 元（⼤写：⼈⺠币贰佰 元整）。</p>
          <p v-if="price == 300">每⽉使⽤费合计： <ins>&nbsp;&nbsp;300&nbsp;&nbsp;</ins> 元（⼤写：⼈⺠币叁佰 元整）。</p>
        </div>
        <h3><strong>三、 协议履⾏⽅式</strong></h3>
      <div class="test_p">
          <p>(⼀) 甲⽅按照《上海电⼦⼝岸VPN⽹络接⼊管理办法》有关规定向中国电⼦⼝岸数据中⼼上海分中⼼（以下简称“数据分中⼼”）递交《上海电⼦⼝岸VPN接⼊申请使⽤登记表》，经数据分中⼼核对有关信息并签注意⻅后，由数据分中⼼通知⼄⽅为甲⽅开通VPN帐号，甲⼄双⽅同时签订本协议，由甲⽅⾃⾏完成VPN客户端安装。</p>
          <p>(⼆) VPN使⽤费从⼄⽅帐号开通的下⽉起计收，并以上海电⼦⼝岸⻔户⽹站上所公布的帐号开通时间为帐号开通⽇。甲⽅按⾃然季度根据本协议确定的VPN⽉使⽤费的标准向⼄⽅⽀付费⽤。⼄⽅每季度第⼀个⽉10⽇前以挂号信⽅式向甲⽅提供上季度费⽤发票（遇国定节假⽇相应向后顺延）。</p>
          <p>(三) 甲⽅收到费⽤帐单后应于当⽉20⽇之前向⼄⽅⽀付上季度费⽤（遇国定节假⽇相应向后顺延）。</p>
          <p>(四) ⼄⽅于缴费截⽌⽇未收到甲⽅⽀付的上季度费⽤时，将向甲⽅催款，若当⽉底还未收到款项，将在向数据分中⼼报备的基础上，于下⽉第⼀个⼯作⽇起暂停甲⽅使⽤VPN接⼊端⼝进⾏数据传输等操作的权限。甲⽅若需恢复使⽤权限，除补交拖⽋款项外，还需按照《上海电⼦⼝岸VPN⽹络接⼊管理办法》有关规定，⽀付VPN帐号开通费（每个帐号开通费为⼈⺠币贰佰元）。</p>
          <p>(五) 甲⽅在使⽤过程中应严格遵守《上海电⼦⼝岸VPN⽹络接⼊管理办法》，否则由此造成的⼀切后果，由甲⽅负责。</p>
        </div>
        <h3><strong>四、 保密条款</strong></h3>
      <div class="test_p">
          <p>保密信息系指关系到双⽅和相关其它⽅⽬前和未来发展的不可向外界披露的商业和经营策略、海关执法信息等,知悉对⽅保密信息的⼀⽅仅可以将该保密信息⽤于履⾏本协议项下的义务。获取对⽅保密信息的⼀⽅应当采取适当有效的措施保护所知悉的保密信息，以防⽌保密信息未经授权⽽被使⽤、传播或公开。</p>
          <p>上述保密义务不适⽤以下情况：</p>
          <p>1、 对⽅书⾯授权许可；</p>
          <p>2、 对⽅书⾯确认不再是保密信息；</p>
          <p>3、 法定强制披露。</p>
        </div>
        <h3><strong>五、 知识产权</strong></h3>
      <div class="test_p">
          <p>⼄⽅拥有VPN⽹络接⼊软件的知识产权。甲⽅不得以任何⽅式将⼄⽅的任何技术秘密（包括但不限于：协议、技术⽅案、⼯程设计、数据库、技术资料、表单、演示⽂件等）透露给其它⽅，否则须承担由此给⼄⽅以及海关带来的全部损失。</p>
          <p>⼄⽅应遵循相应职业道德进⾏严格保密，不将甲⽅的任何业务数据（包括但不限于：协议、数据库、业务数据、相关函电、内部系统信息等）透露给除甲⽅使⽤的上海电⼦⼝岸应⽤项⽬涉及的有关管理部⻔外的其它⽅。</p>
        </div>
        <h3><strong>六、 其他责任和义务</strong></h3>
        <h3><strong>&nbsp;（⼀）甲⽅的责任和义务</strong></h3>
      <div class="test_p">
          <p>1、 根据要求准备好系统实施环境（含硬件和⽹络设置）。因甲⽅原因引起的实施延迟由甲⽅承担相应责任。</p>
          <p>2、 严格按照VPN⽹络接⼊服务使⽤须知使⽤，对⾃⾏操作违背海关正常业务流程规范的⾏为及后果承担相应责任。</p>
          <p>3、 严谨操作，对⾮正常操作引起的数据差异和软件应⽤异常承担相应责任。</p>
          <p>4、 遵守国家有关法律法规。</p>
        </div>
        <h3><strong>&nbsp;（⼆）⼄⽅的责任和义务</strong></h3>
      <div class="test_p">
          <p>1、 按照本协议服务内容提供软件产品和信息服务。</p>
          <p>2、 负责VPN升级和维护服务。</p>
          <p>3、 负责免费修正软件本身存在的技术问题。</p>
        </div>
        <h3><strong>七、 不可抗力</strong></h3>
        <div class="test_p">
          <p>由于地震、台⻛、⽔灾、⽕灾、战争、政府政策变更以及其他不能预⻅并对其发⽣和后果不能预防、不能克服或避免的不可抗⼒直接影响本协议的履⾏或者导致双⽅不能按照约定履⾏协议，遇有不可抗⼒的⼀⽅可以免除相关协议责任。但是遇有不可抗⼒的⼀⽅应⽴即书⾯通知对⽅，并在15天之内提供上述不可抗⼒的详细情况及协议不能履⾏或者部分不能履⾏或者需要延期履⾏的理由和有效的证明⽂件。按照不可抗⼒对履⾏协议影响的程度，由双⽅协商决定是否解除协议，或者部分免除履⾏协议的义务，或者延期履⾏协议。⼀⽅迟延履⾏本协议时发⽣了不可抗⼒的，迟延⽅的协议义务不能免除。</p>
          <p>受不可抗⼒影响的⼀⽅，应当尽可能采取合理的⾏为和适当的措施减轻不可抗⼒对履⾏本协议所造成的影响。没有采取适当措施致使损失扩⼤的，该⽅不得就扩⼤损失的部分要求免责或赔偿。</p>
        </div>
        <h3><strong>⼋、 违约</strong></h3>
        <div class="test_p">
          <p>如果任何⼀⽅未按本协议规定履⾏义务，其他⽅有权暂停协议履⾏，要求违约⽅补偿和采取补救措施，并继续履⾏本协议所规定的义务。</p>
          <p>任何⼀⽅违反本协议所规定的保密义务，违约⽅应当承担因此给对⽅造成的全部损失。</p>
          <p>如果发⽣违约事件，履约⽅应当以书⾯⽅式通知违约⽅，内容包括违约事件、⽅式、赔偿⾦额等。违约⽅在收到上述通知后，应当于10天内答复履约⽅。如果不能就此达成⼀致意⻅，可以按照本协议所规定的争议解决条款解决纠纷。</p>
        </div>
        <h3><strong>九、 争议解决</strong></h3>
        <div class="test_p">
          <p>如果双⽅在履⾏本协议过程中发⽣争议，⾸先应当采取友好协商的⽅式解决该争议，友好协商解决期为争议发⽣后的30天内。如果超过且协商不成的，双⽅同意按下列⽅式予以解决：</p>
          <p>1、 向上海仲裁委员会提起仲裁；</p>
          <p>2、 向⼈⺠法院提请诉讼；</p>
          <p>3、 即使提出争议仲裁或向⼈⺠法院提请诉讼，除争议事项或诉讼事项所涉及的条款外，双⽅应继续履⾏本协议项下的其它义务。</p>
        </div>
        <h3><strong>⼗、 协议终⽌</strong></h3>
        <div class="test_p">
          <p>如果发⽣以下情况，任何⼀⽅有权终⽌本协议，但是须在5个⼯作⽇内以书⾯⽅式通知其它⽅：</p>
          <p>1、 ⼀⽅进⼊破产、解散、被依法关闭、撤销或已进⼊清算阶段；</p>
          <p>2、 ⼀⽅财务状况严重恶化，不能⽀付到期债务；</p>
          <p>3、 出现了协议规定的或法定解除事由。</p>
        </div>
        <h3><strong>⼗⼀、 协议⽣效</strong></h3>
        <div class="test_p">
          <p>本协议未尽事宜经双⽅协商⼀致后可签订补充协议（或增加补充条款），以便对本协议中的有关问题做出补充、说明、解释。本协议的补充条款和补充协议为其不可分割的⼀部分，与本协议具有同等的法律效⼒。</p>
          <p>本协议壹式叁份，双⽅各执壹份；另外壹份交数据分中⼼备案。</p>
          <p>本协议双⽅签字盖章后⽴即⽣效，有效期为⼀年。协议期满前2个⽉内，任何⼀⽅未向其它⽅书⾯提出终⽌协议的，则本协议⾃动延⻓⼀年，延⻓次数不限。</p>
        </div>
        <br />
        <div class="bottom_qianzhang">
          <div>
            <h3><strong>甲方：</strong></h3>
            <h3><strong>代表人： （签章）</strong></h3>
            <h3><strong><span style="margin-left: 55px;">年</span><span style="margin-left: 20px;">月</span><span style="margin-left: 20px;">日</span></strong></h3>
          </div>
          <div>
            <h3><strong>乙方： 上海亿通国际股份有限公司</strong></h3>
            <h3><strong>代表人： （签章）</strong></h3>
            <h3><strong><span style="margin-left: 55px;">年</span><span style="margin-left: 20px;">月</span><span style="margin-left: 20px;">日</span></strong></h3>
          </div>
        </div>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="handelClose">取 消</el-button>
        <el-button ref="btnPrint" type="primary" v-print="printId" @click="submitPrint" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
      </span>
    </el-dialog> 
    <!-- 新增或修改VPN对话框 -->
    <el-dialog class="VPNDialog" :title="VPNtitle" :visible.sync="VPNopen" width="25%" :close-on-click-modal="false" append-to-body>
      <el-form ref="VPNform" :model="VPNform" :rules="VPNrules" label-width="100px">
        <el-form-item label="VPN流水号" prop="serialCode">
          <el-input :disabled="disableVpn" v-model="VPNform.serialCode" clearable placeholder="请输入VPN流水号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitVPNForm">保 存</el-button>
        <el-button @click="cancelVPN">返 回</el-button>
      </div>
    </el-dialog>
    <!-- 派工单弹窗 -->
    <el-dialog class="OrderDialog" :title="Ordertitle" :visible.sync="Orderopen" width="25%" :close-on-click-modal="false" append-to-body>
      <el-form ref="Orderform" :model="Orderform" :rules="Orderrules" label-width="100px">
        <el-form-item label="派单公司" prop="company">
          <el-input :disabled="disableOrder" v-model="Orderform.company" clearable placeholder="请输入派单公司名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input :disabled="disableOrder" v-model="Orderform.remark" clearable placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOrderForm">保 存</el-button>
        <el-button @click="cancelOrder">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detailProcess,listProcessGen } from "@/api/workflow/process";
// import Parser from "@/utils/generator/parser";
import {
  complete,
  delegate,
  transfer,
  rejectTask,
  returnList,
  returnTask,
  submitList,
  updateFormList
} from "@/api/workflow/task";
import { selectUser, deptTreeSelect } from "@/api/system/user";
import ProcessViewer from "@/components/ProcessViewer";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { VPNdetail,addVPNdetail,updateVPNdetail,Orderdetail,addOrderdetail,updateOrderdetail,detailHistory } from '@/api/businessModule/merge.js'
// import loginVue from '../../../login.vue';
export default {
  name: "workdetail",
  components: {
    ProcessViewer,
    // Parser,
    Treeselect
  },
  props: {},
  computed: {
    commentType() {
      return val => {
        switch (val) {
          case "1":
            return '已审批';
          case "2":
            return "退回";
          case "3":
            return "驳回";
          case "4":
            return "委派";
          case "5":
            return "转办";
          case "6":
            return "终止";
          case "7":
            return "撤回";
        }
      };
    },
    approveTypeTag() {
      return val => {
        switch (val) {
          case "1":
            return "success";
          case "2":
            return "warning";
          case "3":
            return "danger";
          case "4":
            return "primary";
          case "5":
            return "success";
          case "6":
            return "danger";
          case "7":
            return "info";
        }
      };
    }
  },
  data() {
    return {
      // 派工单按钮
      OrderButton: null,
      VPNtitle:'新增',
      // VPN弹窗
      VPNopen: false,
      // 表单
      VPNform: {},
      VPNrules: {
        serialCode: [
          {required: true, message: '请输入VPN流水号', trigger: 'blur' }
        ],
      },
      // 禁用输入
      disableVpn: false,
      // 派单弹窗
      Orderopen: false,
      Ordertitle:'生成派工单',
      // 派单form
      Orderform: {},
      // 派单校验
      Orderrules: {
        company: [
          {required: true, message: '请输入派单公司名称', trigger: 'blur' }
        ],
      },
      // 派单禁用
      disableOrder:false,
      // 收缩面板
      activeNames:['1'],
      // 遮罩层表单信息
      formLoading:true,
      // 全局loading
      fullscreenLoading: false,
      // 打印窗口
      dialogVisible: false,
      // 打印弹窗数据
      printList: {},
      // 条形码
      barCode:'',
      // 打印绑定对象
      printId: {
        id: 'printBox',
        openCallback(vue) {
          // vue.fullscreenLoading = false
        },
        //关闭打印的回调事件（无法确定点击的是确认还是取消）
        //函数中this指向当前print object对象，that返回Vue对象；
        closeCallback(vue) { 
          // console.log(vue,'vue');
          // vue.formDisable.disableForm()
          // vue.formDisable.enableWidgets('cut')
          // console.log(vue,'66');
          // vue.fullscreenLoading = false
        }
      },
      objNew:{},
      // 表单数组
      formDisable:[],
      btnTitle: '通过',
      // 当前状态
      approvalStatus:null,
      // 系统名称
      projectName:null,
      height: document.documentElement.clientHeight - 205 + "px;",
      // 模型xml数据
      loadIndex: 0,
      xmlData: undefined,
      finishedInfo: {
        finishedSequenceFlowSet: [],
        finishedTaskSet: [],
        unfinishedTaskSet: [],
        rejectedTaskSet: []
      },
      historyProcNodeList: [],
      // 部门名称
      deptName: undefined,
      // 部门树选项
      deptOptions: undefined,
      userLoading: false,
      // 用户表格数据
      userList: null,
      deptProps: {
        children: "children",
        label: "label"
      },
      // 查询参数
      queryParams: {
        deptId: undefined
      },
      total: 0,
      // 遮罩层
      loading: true,
      taskForm: {
        // 审核按钮传的类型
        btStatus:'',
        comment: "", // 意见内容
        procInsId: "", // 流程实例编号
        taskId: "", // 流程任务编号
        copyUserIds: "", // 抄送人Id
        vars: "",
        targetKey: "",
        variables:{}
      },
      editFlag:null,
      rules: {
        comment: [
          { required: true, message: "请输入审批意见", trigger: "change" }
        ]
      },
      currentUserId: null,
      variables: [], // 流程变量数据
      taskFormOpen: false,
      taskFormData: {}, // 流程变量数据
      processFormList: [], // 流程变量数据
      processList:[], //去重数组
      formOpen: false, // 是否加载流程变量数据
      returnTaskList: [], // 回退列表数据
      processed: false,
      returnTitle: null,
      returnOpen: false,
      rejectOpen: false,
      rejectTitle: null,
      userData: {
        title: "",
        type: "",
        open: false
      },
      copyUser: [],
      nextUser: [],
      userMultipleSelection: [],
      userDialogTitle: "",
      userOpen: false,
      businessType: null,
      appStatusType: [
        {
          value: '1',
          label:'通过'
        },
        {
          value: '3',
          label:'通过'
        },
        {
          value: '5',
          label:'通过'
        },
        {
          value: '7',
          label:'经办完成'
        },
        {
          value: '8',
          label:'处理完成'
        },
        {
          value: '9',
          label:'安装完成'
        },
      ],
      buttonConfig: null,
      otherConfig: null,
      specialBtn: null,
      // 收费列表
      ratesList100: [
        '进出境运输工具动态申报系统(海运)',
        '进出境运输工具动态申报系统(空运)',
        '进出境运输工具舱单由报系统(海运)',
        '进出境运输工具舱单由报系统(空运)',
        '展览品管理系统(单一窗口）',
        '中国 (上海)自由贸易试验区信息化系统'
      ],
      ratesList200: [
        '海关放行电子信息接收系统(空运)',
        '海关放行电子信息接收系统(海运)',
        '特殊区域 (保税仓储联网)信息化管理系统',
        '特殊区域货物管理系统',
        '钻交所海关特殊区域信息化管理系统',
        '特殊监管区域 (H帐册联网)信息化管理系统',
        '加工贸易联网监管 (E帐册) 辅助管理模块 （二期 )',
        '特殊区域 (先进区、后报关) 信息化系统',
        '特殊区域(保税展示交易)信息化系统',
        '特殊区域(维修、检测帐册联网) 信息化管理系统',
      ],
      ratesList300: [
        '自贸区空运“先进区、后报关”进口货物电子提货通知书接收系统',
        '出口新造集装箱及堆场管理系统',
        '快件KJ类随附单证电子化传输系统',
      ],
      // 打印申请用户名
      PrintTitle: null,
      // 项目名称
      PrintName:null,
      // 价格
      price: null,
      // 意见下拉框
      restaurants: [],
      // 历史记录表遮罩层
      historyLoading: true,
      // 历史总条数
      totalHistory:0,
      // 历史记录表
      historyList: [],
      // 历史记录查询条件
      queryParamsHistory: {
        pageNum: 1,
        pageSize: 10,
        serialCode:null,
      },
      // 判断用户第一次点击
      isFirstClick: true
    };
  },
  mounted() {
    this.getDictList()
  },
  created() {
    this.initData();
  },
  methods: {
    handleProcess(row) {
      this.$router.push({
        path: "/workflow/process/mergedetail/" + row.procInstId,
        query: {
          processed: false
        }
      });
    },
    handleClick(tab, event) {
      if (tab.name == 'history') {
        this.getHistoryList()
      }
    },
    // 申请历史列表
    async getHistoryList() {
      this.historyLoading = true
      const hisres = await detailHistory(this.queryParamsHistory)
      this.historyList = hisres.rows
      this.totalHistory = hisres.total
      this.historyLoading = false
    },
    // 意见下拉框
    async getDictList() {
      const loadAll = await this.getDicts('useful_expression')
      const options = loadAll.data
      this.restaurants = options.map(item => {
        return {
          value: item.dictLabel,
          label:item.dictValue
        }
      })
    },
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
      createFilter(queryString) {
        return (restaurant) => {
          if (restaurant.dictLabel) {
             return (restaurant.dictLabel.toUpperCase().match(queryString.toUpperCase()));
          }
         
        };
        
    },
      handleSelect(item) {
        console.log(item)
      },
    // 派单提交
    submitOrderForm() {
      if (this.disableOrder == true) {
        this.Orderopen = false
      } else {
        this.$refs["Orderform"].validate(async valid => { 
        if (valid) {
          const OrderParams = {
              procInstId: this.taskForm.procInsId,
              company: this.Orderform.company,
              remark:this.Orderform.remark,            
          }
          if (this.Orderform.id != null) {
            await updateOrderdetail(OrderParams)
            this.$modal.msgSuccess("修改成功");
              this.Orderopen = false;
          } else {
            await addOrderdetail(OrderParams)
            this.$modal.msgSuccess("新增成功");
            this.Orderopen = false;
          }
            }
      })
      }
    },
    // 派单取消
    cancelOrder() {
      this.Orderopen = false
    },
    // 生成派工单
    async workOrder() {
      this.resetOrder()
      const resOrder = await Orderdetail({ procInstId: this.taskForm.procInsId })
      if (resOrder.data) {
        if (this.processed === true) {
          this.Ordertitle = '修改派工单'
        this.disableOrder = false
        } else {
        this.Ordertitle = '查看派工单'
        this.disableOrder = true
      }
        this.Orderform = resOrder.data
      } else {
        this.VPNtitle = '新增关联VPN流水号'
      }
      
      this.Orderopen = true
    },
    // 关联VPN
    async handleVPN() {
      this.resetVPN()
      const res = await VPNdetail({ procInstId: this.taskForm.procInsId })
      if (res.data) {
        if (this.processed === true ) {
        this.VPNtitle = '修改关联VPN流水号'
        this.disableVpn = false
        } else {
        this.VPNtitle = '查看关联VPN流水号'
        this.disableVpn = true
      }
        this.VPNform = res.data
      } else {
        this.VPNtitle = '新增关联VPN流水号'
      }
      this.VPNopen = true
    },
    // 派工
    resetOrder() {
      this.Orderform = {
        id: null,
        company: null,
        remark:null,
      };
      this.resetFormData("Orderform");
    },
    // VPN表单清除
    resetVPN() {
      this.VPNform = {
        id: null,
        serialCode:null,
      };
      this.resetFormData("VPNform");
    },
    // 取消按钮
    cancelVPN() {
      this.VPNopen = false
      this.resetVPN()
    },
    // 保存VPN流水号按钮
    submitVPNForm() {
      if (this.disableVpn == true) {
        this.VPNopen = false
      } else {
        this.$refs["VPNform"].validate(async valid => { 
        if (valid) {
          const vpnParams = {
              procInstId: this.taskForm.procInsId,
              serialCode:this.VPNform.serialCode
          }
          if (this.VPNform.id != null) {
            await updateVPNdetail(vpnParams)
            this.$modal.msgSuccess("修改成功");
              this.VPNopen = false;
          } else {
            await addVPNdetail(vpnParams)
            this.$modal.msgSuccess("新增成功");
            this.VPNopen = false;
          }
            }
      })
      }
      
      
    },
    handleChange(val) {

    },
    // 返回按钮
    returnGo() {
      this.$router.back(-1)
    },
    // 暂存表单
    handleupdateForm() {
      let Vform = this.$refs.vFormRefSubmit[0].getFormData(false)
      let saveObj = {
          complete:{
            assignee: "",
            candidateGroups:[],
            candidateUsers: [],
            comment: "",
            copyUserIds: "",
            nextUserIds: "",
            procInsId: this.taskForm.procInsId,
            targetKey: "",
            taskId: this.taskForm.taskId,
            taskName: "",
            userId: "",
            variables: {},
           
          },
           variables:Vform,
        }
        updateFormList(saveObj,this.businessType).then(res => {
          // if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
            this.$router.back(-1)
          // }
        })
    },
    // 提交表单
    handleCompleteSubmit() {
      this.$refs.vFormRefSubmit[0].getFormData().then(formData => {
        let saveObj = {
          complete:{
            assignee: "",
            candidateGroups:[],
            candidateUsers: [],
            comment: "",
            copyUserIds: "",
            nextUserIds: "",
            procInsId: this.taskForm.procInsId,
            targetKey: "",
            taskId: this.taskForm.taskId,
            taskName: "",
            userId: "",
            variables: {},
           
          },
           variables:formData,
        }
        submitList(saveObj,this.businessType).then(res => {
          // if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
            this.$router.back(-1)
          // }
        })
      }) 
    },
    // 打印弹窗取消按钮
    handelClose() {
      this.dialogVisible = false
    },
    
    // 打印 按钮
    async PrintContract() {
      const res=await listProcessGen({
        procInsId:this.taskForm.procInsId
      })
        let url = window.URL.createObjectURL(res)
      this.barCode = url
      let dataFiled = this.processFormList[0].field 
      this.PrintTitle = dataFiled.DLYHMC
      this.PrintName = dataFiled.XTLXQT
      let glXTName = dataFiled.XTLXQT.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
      let typeVal = dataFiled.XTLX
      if (typeVal == '0') {
        let list100 = this.ratesList100.map(item => {
          return item.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        })
        let list200 = this.ratesList200.map(item => {
          return item.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        })
        let list300 = this.ratesList300.map(item => {
          return item.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        })
        if (list100.includes(glXTName)) {
          this.price = 100
        } else if (list200.includes(glXTName)) {
          this.price = 200
        } else if(list300.includes(glXTName)) {
          this.price = 300
        }
      } else if (typeVal == '1') {
        this.PrintTitle == '单一窗口报关单申报系统'
        this.price = 300
      }
      console.log(this.PrintTitle,'888888');
      this.dialogVisible = true
    },
    // 去重数组
    mapProcessList(list) {
      let flag = true
        list.map((item, index, arr) => {
                flag = true;
                if (this.processList.length < 1) {
                    this.processList.push(item);
                } else {
                    this.processList.map((item2, index2, res) => {
                        if (item2.title === item.title) {
                            item2.field = item.field;
                            flag = false;
                        }
                    });
                    if (flag) {
                      this.processList.push(item);
                    }
                }
        });
    },
    // 确定打印按钮
    submitPrint() {
      // this.fullscreenLoading = true;
      
    },
    initData() {
      this.formLoading = true
      this.taskForm.procInsId =
        this.$route.params && this.$route.params.procInsId;
      this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
      this.processed =
        this.$route.query && eval(this.$route.query.processed || false);
      // 流程任务重获取变量表单
      this.getProcessDetails(this.taskForm.procInsId, this.taskForm.taskId);
      this.loadIndex = this.taskForm.procInsId;
    },
    /** 查询部门下拉树结构 */
    getTreeSelect() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询用户列表 */
    getList() {
      this.userLoading = true;
      selectUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.userList = response.rows;
          this.total = response.total;
          this.toggleSelection(this.userMultipleSelection);
          this.userLoading = false;
        }
      );
    },
    // 筛选节点
    filterNode(value, data) {
      // console.log(value,data,"88890999");
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userMultipleSelection = selection;
    },
    toggleSelection(selection) {
      if (selection && selection.length > 0) {
        this.$nextTick(() => {
          selection.forEach(item => {
            let row = this.userList.find(k => k.userId === item.userId);
            this.$refs.userTable.toggleRowSelection(row);
          });
        });
      } else {
        this.$nextTick(() => {
          this.$refs.userTable.clearSelection();
        });
      }
    },
    // 关闭标签
    handleClose(type, tag) {
      let userObj = this.userMultipleSelection.find(
        item => item.userId === tag.id
      );
      this.userMultipleSelection.splice(
        this.userMultipleSelection.indexOf(userObj),
        1
      );
      if (type === "copy") {
        // console.log(this.userMultipleSelection,"shi");
        this.copyUser = this.userMultipleSelection;
        // 设置抄送人ID
        if (this.copyUser && this.copyUser.length > 0) {
          const val = this.copyUser.map(item => item.id);
          this.taskForm.copyUserIds =
            val instanceof Array ? val.join(",") : val;
        } else {
          this.taskForm.copyUserIds = "";
        }
      } else if (type === "next") {
        this.nextUser = this.userMultipleSelection;
        // 设置抄送人ID
        if (this.nextUser && this.nextUser.length > 0) {
          const val = this.nextUser.map(item => item.id);
          this.taskForm.nextUserIds =
            val instanceof Array ? val.join(",") : val;
        } else {
          this.taskForm.nextUserIds = "";
        }
      }
    },
    /** 流程变量赋值 */
    handleCheckChange(val) {
      
      if (val instanceof Array) {
        this.taskForm.values = {
          approval: val.join(",")
        };
      } else {
        this.taskForm.values = {
          approval: val
        };
      }
    },
    getProcessDetails(procInsId, taskId) {
      const params = { procInsId: procInsId, taskId: taskId };
      detailProcess(params).then(res => {
        // console.log(res, "88888888");
        const data = res.data;
        this.queryParamsHistory.serialCode = data.serialCode
        this.buttonConfig = data.buttonConfig
        this.otherConfig = data.otherConfig
        if (this.otherConfig) {
          this.specialBtn = this.otherConfig.specialBtn
        }
        this.editFlag = data.editFlag
        this.businessType = data.businessType
        this.approvalStatus = data.approvalStatus
        if (this.approvalStatus == '归档') {
          this.OrderButton = '查看派工单'
        } else {
          this.OrderButton = '生成派工单'
        }
        let bott = this.appStatusType.filter(item => item.value == data.approvalStatus)
        if (bott.length > 0) {
          this.taskForm.comment = bott[0].label
        }
        this.xmlData = data.bpmnXml;
        this.processFormList = data.processFormList;
        this.processFormList[0].title = data.projectName
        this.projectName = data.projectName.trim().replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
        this.taskFormOpen = data.existTaskForm;
        if (this.taskFormOpen) {
          this.taskFormData = data.taskFormData;
        }
        this.historyProcNodeList = data.historyProcNodeList;
        this.mapProcessList(this.processFormList)
        if (data.taskFormData != null) {
           const newList =this.processList
          this.processList = newList.filter((formItem) => {
            return formItem.title != data.taskFormData.title
          })
        }
        this.finishedInfo = data.flowViewer;
        this.formOpen = true;
        // if (data.editFlag == 0) {
            // 禁用每一项Vform表单
        this.$nextTick(() => {
          // console.log(this.$refs.vFormRef);
          this.formDisable = this.$refs.vFormRefSubmit
          // console.log(this.formDisable, "9");
          if (this.formDisable.length > 0) {
            this.formDisable.forEach((item) => {
              item.showWidgets('serialCode')
              item.setFieldValue('serialCode', data.serialCode)
              if (data.editFlag == 0) {
                  // console.log(item,"77788887877");
                return [ item.disableForm(),item.enableWidgets('cut') ]
              } else {
                item.disableWidgets('serialCode')
              }
            
          })
          } else {
            this.$refs.vFormRef.disableForm()
            this.$refs.vFormRef.enableWidgets('cut')
          }
          
          // this.$refs.vFormRef[0].disableForm()
        })
        // }
        
       this.formLoading = false;
      });
    },
    onSelectCopyUsers() {
      this.userMultipleSelection = this.copyUser;
      this.onSelectUsers("新增抄送人", "copy");
    },
    onSelectNextUsers() {
      this.userMultipleSelection = this.nextUser;
      this.onSelectUsers("指定审批人", "next");
    },
    onSelectUsers(title, type) {
      this.userData.title = title;
      this.userData.type = type;
      this.getTreeSelect();
      this.getList();
      this.userData.open = true;
    },
    /** 通过任务 */
    async handleComplete(type, specialBtn) {
      console.log(specialBtn,'spec');
      // 校验表单
      // const taskFormRef = this.$refs.taskFormParser;
      // const isExistTaskForm = taskFormRef !== undefined;
      // // 若无任务表单，则 taskFormPromise 为 true，即不需要校验
      // const taskFormPromise = !isExistTaskForm
      //   ? true
      //   : new Promise((resolve, reject) => {
      //       taskFormRef.$refs[taskFormRef.formConfCopy.formRef].validate(
      //         valid => {
      //           valid ? resolve() : reject();
      //         }
      //       );
      //     });
      // const approvalPromise = new Promise((resolve, reject) => {
      //   this.$refs["taskForm"].validate(valid => {
      //     valid ? resolve() : reject();
      //   });
      // });
      // Promise.all([taskFormPromise, approvalPromise]).then(() => {
      //   if (isExistTaskForm) {
      //     this.taskForm.variables =
      //       taskFormRef[taskFormRef.formConfCopy.formModel];
      //   }
      //   complete(this.taskForm).then(response => {
      //     this.$modal.msgSuccess(response.msg);
      //     this.goBack();
      //   });
      // });
      if (this.isFirstClick) {
        if (type == '1') {
        this.taskForm.comment = this.taskForm.comment
        } else {
          if (specialBtn) {
            this.taskForm.comment = specialBtn
          } else {
            if (type == '0') {
              if (this.taskForm.comment == "") {
          this.taskForm.comment = '通过'
        } else {
          this.taskForm.comment = this.taskForm.comment
        }
            }
          }
          
        }
        
        this.taskForm.btStatus = type
        this.$refs["taskForm"].validate(async valid => {
          if (valid) {
            if (!this.taskFormOpen) {
              this.isFirstClick = false
              const res = await complete(this.taskForm)
              this.$modal.msgSuccess(res.msg);
              this.goBack();
            } else {
              if (type == '0') {
                const formData = await this.$refs.vFormRefs.getFormData(true)
                this.isFirstClick = false
                this.taskForm.variables = formData
                const res = await complete(this.taskForm)
                this.$modal.msgSuccess(res.msg);
                this.goBack();
              } else {
                this.isFirstClick = false
                const formData = await this.$refs.vFormRefs.getFormData(false)
                this.taskForm.variables = formData
                const res = await complete(this.taskForm)
                this.$modal.msgSuccess(res.msg);
                this.goBack();
              }
        }
          }
        })
      }
      
      
      
    },
    // // 处理按钮
    // async handleDispose() {
    //   this.taskForm.comment ='处理完成'
    //   if (!this.taskFormOpen) {
    //     const res = await complete(this.taskForm)
    //     this.$modal.msgSuccess(res.msg);
    //     this.goBack();
    //       } else {
    //       const formData = await this.$refs.vFormRefs.getFormData()
    //       this.taskForm.variables = formData
    //       const res = await complete(this.taskForm)
    //       this.$modal.msgSuccess(res.msg);
    //       this.goBack();
    //   }
    // },
    // async handleInstall() {
    //   this.taskForm.comment ='安装完成'
    //   if (!this.taskFormOpen) {
    //     const res = await complete(this.taskForm)
    //     this.$modal.msgSuccess(res.msg);
    //     this.goBack();
    //       } else {
    //       const formData = await this.$refs.vFormRefs.getFormData()
    //       this.taskForm.variables = formData
    //       const res = await complete(this.taskForm)
    //       this.$modal.msgSuccess(res.msg);
    //       this.goBack();
    //   }
    // },
    /** 委派任务 */
    handleDelegate() {
      this.$refs["taskForm"].validate(valid => {
        if (valid) {
          this.userData.type = "delegate";
          this.userData.title = "委派任务";
          this.userData.open = true;
          this.getTreeSelect();
        }
      });
    },
    /** 转办任务 */
    handleTransfer() {
      this.$refs["taskForm"].validate(valid => {
        if (valid) {
          this.userData.type = "transfer";
          this.userData.title = "转办任务";
          this.userData.open = true;
          this.getTreeSelect();
        }
      });
    },
    /** 拒绝任务 */
    handleReject() {
      this.$refs["taskForm"].validate(valid => {
        if (valid) {
          const _this = this;
          this.$modal
            .confirm("拒绝审批单流程会终止，是否继续？")
            .then(function() {
              return rejectTask(_this.taskForm);
            })
            .then(res => {
              this.$modal.msgSuccess(res.msg);
              this.goBack();
            });
        }
      });
    },
    changeCurrentUser(val) {
      this.currentUserId = val.userId;
    },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$tab.closePage(this.$route);
      this.$router.back();
    },
    /** 接收子组件传的值 */
    // getData(data) {
    //   if (data) {
    //     const variables = [];
    //     data.fields.forEach(item => {
    //       let variableData = {};
    //       variableData.label = item.__config__.label;
    //       // 表单值为多个选项时
    //       if (item.__config__.defaultValue instanceof Array) {
    //         const array = [];
    //         item.__config__.defaultValue.forEach(val => {
    //           array.push(val);
    //         });
    //         variableData.val = array;
    //       } else {
    //         variableData.val = item.__config__.defaultValue;
    //       }
    //       variables.push(variableData);
    //     });
    //     this.variables = variables;
    //   }
    // },
    submitUserData() {
      let type = this.userData.type;
      if (type === "copy" || type === "next") {
        if (
          !this.userMultipleSelection ||
          this.userMultipleSelection.length <= 0
        ) {
          this.$modal.msgError("请选择用户");
          return false;
        }
        let userIds = this.userMultipleSelection.map(k => k.userId);
        if (type === "copy") {
          // 设置抄送人ID信息
          this.copyUser = this.userMultipleSelection;
          this.taskForm.copyUserIds =
            userIds instanceof Array ? userIds.join(",") : userIds;
        } else if (type === "next") {
          // 设置下一级审批人ID信息
          this.nextUser = this.userMultipleSelection;
          this.taskForm.nextUserIds =
            userIds instanceof Array ? userIds.join(",") : userIds;
        }
        this.userData.open = false;
      } else {
        if (!this.taskForm.comment) {
          this.$modal.msgError("请输入审批意见");
          return false;
        }
        if (!this.currentUserId) {
          this.$modal.msgError("请选择用户");
          return false;
        }
        this.taskForm.userId = this.currentUserId;
        if (type === "delegate") {
          delegate(this.taskForm).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.goBack();
          });
        }
        if (type === "transfer") {
          transfer(this.taskForm).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.goBack();
          });
        }
      }
    },
    /** 可退回任务列表 */
    handleReturn() {
      if (this.taskForm.comment == "" || this.taskForm.comment == "通过") {
        this.taskForm.comment = ''
      }
      this.taskForm.btStatus = '1'
      this.$refs["taskForm"].validate(async valid => {
        if (valid) {
          if (!this.taskFormOpen) {
        const res = await complete(this.taskForm)
        this.$modal.msgSuccess(res.msg);
        this.goBack();
          } else {
          const formData = await this.$refs.vFormRefs.getFormData()
          this.taskForm.variables = formData
          const res = await complete(this.taskForm)
          this.$modal.msgSuccess(res.msg);
          this.goBack();
      }
        }
       })
      // this.$refs["taskForm"].validate(valid => {
      //   if (valid) {
      // //     this.returnTitle = "退回流程";
      //     returnList(this.taskForm).then(res => {
      //       // console.log(res);
      //       // if (res.data) {
      //       //   this.returnTaskList = res.data;
      //       //   let taskObj = this.returnTaskList.at(-1)
      //       //   this.taskForm.targetKey = taskObj.id
      //       //   this.taskForm.values = null;
      //       //   returnTask(this.taskForm).then(res => {
      //       //     this.$modal.msgSuccess(res.msg);
      //       //     this.goBack();
      //       //   });
      //       // }
            
      //       // this.returnOpen = true;
      //     });
      //   }
      // });
    },
    /** 提交退回任务 */
    submitReturn() {
      this.$refs["taskForm"].validate(valid => {
        if (valid) {
          if (!this.taskForm.targetKey) {
            this.$modal.msgError("请选择退回节点！");
          }
          // returnTask(this.taskForm).then(res => {
          //   this.$modal.msgSuccess(res.msg);
          //   this.goBack();
          // });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  #printBox {
    height: 70vh;
    overflow-y: scroll;
  }
  
}
.el-card ::v-deep .el-card__header {
  background-color: #8FC4F9;
}
#printBox {
  padding: 0 30px;
  .test_p {
    text-indent: 2em;
    color: #000;
    font-size: 15px;
  }
  .bottom_qianzhang {
    display: flex;
    justify-content: space-around;
  }
}
.Print_title {
  color: #000;
  h2 {
    margin: 0 ;
    font-weight: 700;
    text-align: center;
  }
  p {
    margin-bottom: 30px;
  }
  
}
.todoFlex {
  display: flex;
  justify-content: space-between;
}
.headerTitle {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.clearfix {
  font-size: 14px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-Print {
  margin-top: 20px;
  // margin-bottom: 20px;
}
.taskPrint {
  display: flex;
  justify-content: space-between;
}
.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.button-new-tag {
  margin-left: 10px;
}
</style>
<style>
@media print {
  @page {
    size:  auto;
  }
  body, html {
    height: auto !important;
  }
}
</style>
